import React, { Component } from "react";
import { NavBar, Icon } from "antd-mobile";
import user_img from "../../assets/images/user-bg.jpg";
import wd from "../../assets/images/wd-012-1.png";
import fk from "../../assets/images/fukuan-07.png";
import sh from "../../assets/images/shouhuo-07.png";
import pd from "../../assets/images/pd-return.png";
import vip from "../../assets/images/vip-1521514865.png";
import coupon from "../../assets/images/wd-012-02.png";
import JF from "../../assets/images/wd-012-03.png";
import Ebook from "../../assets/images/111.png";
import Product from "../../assets/images/wd-012-04.png";
import address from "../../assets/images/wd-012-05.png";
import service from "../../assets/images/wd-012-07.png";
import tu from "../../assets/images/header_o.jpg";
import personal from "../../assets/images/personal.png";
import "./My.scss";
import axios from "axios";

export default class My extends Component {
  constructor(props) {
    super(props);
    this.contentRef = React.createRef();
  }
  state = {
    isLogin: false,
    recommend: [],
    token: {},
    backTop: false, //返回顶部栏默认隐藏
    cart: [],
    endearment: "无昵称用户",
  };
  componentDidMount() {
    // 获取localStorage中token
    let loginToken = JSON.parse(localStorage.getItem("loginToken"));
    this.setState({
      token: loginToken,
    });
    // 判断token值是否存在
    if (loginToken) {
      this.setState({
        isLogin: true,
      });
    }
    // 获取localStorage中的sclist
    let sclist = JSON.parse(localStorage.getItem("scList"));
    this.setState({
      cart: sclist,
    });
    axios
      .get("/cart.php?action=cart_ad_and_recommend&productIds=&img_size=h")
      .then((res) => {
        this.setState({
          recommend: res.data.data,
        });
      })
      .catch((err) => {
        console.log(err);
      });
    this.contentRef.current.parentElement.addEventListener(
      "scroll",
      this.handleScroll
    );
    let personalInfo=JSON.parse(localStorage.getItem("personalInfo"))
    
    this.setState({
      personalInfo
    })
  }
  handleScroll = () => {
    let parentElement = this.contentRef.current.parentElement;
    // let clientHeight = parentElement.clientHeight;    // 客户端高度
    // let scrollHeight = parentElement.scrollHeight;    // 列表的高度
    let scrollTop = parentElement.scrollTop; // 列表已经滚动的高度
    //  console.log(clientHeight);
    //  console.log(scrollHeight);
    if (scrollTop > 1000) {
      this.setState({
        backTop: true,
      });
    } else {
      this.setState({
        backTop: false,
      });
    }
  };
  componentWillUnmount() {
    // 卸载监听事件
    this.contentRef.current.parentElement.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }
  // 回到顶部
  backToTop = () => {
    let scrollTop = this.contentRef.current.parentElement.scrollTop;
    let myTimer = setInterval(() => {
      scrollTop -= 200;
      if (scrollTop <= 0) {
        scrollTop = 0;
        window.clearInterval(myTimer);
      }
      this.contentRef.current.parentElement.scrollTo(0, scrollTop);
    }, 10);
  };
  //  点击跳转到详情页面
  handleItemClick = (goods_info) => {
    this.props.history.push({
      pathname: "/goodDetail",
      state: { goods_info: goods_info },
    });
  };
  handlePersonal = (params) => {
    this.props.history.push("/personal/");
  };
  // 点击跳转到登录界面
  handleToLogin = (params) => {
    this.props.history.push("/login/" + 0);
  };

  // 点击跳转到订单界面
  handleToOrder = (params) => {
    if (this.state.token) {
      this.props.history.push("/order/");
    } else {
      this.props.history.push("/login/" + 1);
    }
  };

  // 点击退出登录
  handleClickOut=(params) => {
    window.localStorage.removeItem('loginToken')
    this.props.history.go(0)
  }
  // 点击跳转到收藏页面
  handleToCollect=(params) => {
    this.props.history.push("/collect/")
  }
  
  render() {
    return (
      <div className="dang-my">
        {/* 我的导航条开始 */}
        <div className="dang-my-nav">
          <NavBar
            className="dang-my-header"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[<Icon key="1" type="ellipsis" />]}
          >
            我的当当
          </NavBar>
        </div>
        {/* 分类导航条结束 */}
        <div className="container">
          {/* login开始 */}
          <div className="dang-my-login">
            <img src={user_img} alt="" />
            {this.state.isLogin ? (
              <div>
                <div className="user">
                  <div className="user-lift">
                    <img src={tu} alt=""></img>
                  </div>
                  <div className="user-right">
                    <div className="account">{this.state.personalInfo?this.state.personalInfo.endearment:this.state.endearment}</div>
                    <span>余额0.00</span>
                    <span>礼品卡0.00</span>
                    <span>积分0.00</span>
                  </div>
                </div>
                <div className="personal" onClick={this.handlePersonal}>
                  <img src={personal} alt=""></img>
                </div>
              </div>
            ) : (
              <div className="login-btn" onClick={this.handleToLogin}>
                登录/注册
              </div>
            )}
          </div>
          {/* login结束 */}

          {/* collect开始 */}
          <div className="dang-my-collect">
            <div className="dang-collect-list">
              <div className="collect-item" onClick={this.handleToCollect}>
                <div className="collect-item-num">{this.state.cart ? this.state.cart.length : "0"}</div>
                <div className="collect-item-text">收藏的商品</div>
              </div>

              <div className="collect-item">
                <div className="collect-item-num">0</div>
                <div className="collect-item-text">关注的店铺</div>
              </div>

              <div className="collect-item">
                <div className="collect-item-num">0</div>
                <div className="collect-item-text">我的足迹</div>
              </div>
            </div>
          </div>
          {/* collect结束 */}

          {/* Order开始 */}
          <div className="dang-my-order">
            <div className="order-content-top">
              <div className="order-content-left">
                <img src={wd} alt=""></img>
                <div className="title">我的订单</div>
              </div>
              <div className="order-content-right">
                <div className="title1">查看全部购买的商品</div>
                {/* <img src={wd} alt=""></img> */}
              </div>
            </div>

            <div className="order-content-bottom">
              <div className="content-bottom-list">
                <div className="list-item" onClick={this.handleToOrder}>
                  <img src={fk} alt=""></img>
                  <div className="title2">待付款</div>
                </div>

                <div className="list-item">
                  <img src={sh} alt=""></img>
                  <div className="title2">待收货</div>
                </div>

                <div className="list-item">
                  <img src={pd} alt=""></img>
                  <div className="title2">退换货</div>
                </div>
              </div>
            </div>
          </div>
          {/* Order结束 */}
          {/*vip开始*/}
          <div className="dang-my-vip">
            <div className="vip-list">
              <div className="vip-list-left">
                <img src={vip} alt="" />
                <p className="list-title">会员中心</p>
              </div>
              <div className="vip-list-right">
                <i className="iconfont icon-you"></i>
              </div>
            </div>
          </div>
          {/* vip结束 */}

          {/* 礼券 */}
          <div className="dang-my-coupon">
            <div className="coupon-list-contener">
              <div className="coupon-list-item">
                <div className="coupon-list-left">
                  <img src={coupon} alt="" />
                  <p className="list-title">我的礼券</p>
                </div>
                <div className="coupon-list-right">
                  <i className="iconfont icon-you"></i>
                </div>
              </div>

              <div className="coupon-list-item">
                <div className="coupon-list-left">
                  <img src={JF} alt="" />
                  <p className="list-title">积分抵现</p>
                </div>
                <div className="coupon-list-right">
                  <i className="iconfont icon-you"></i>
                </div>
              </div>

              <div className="coupon-list-item">
                <div className="coupon-list-left">
                  <img src={Ebook} alt="" />
                  <p className="list-title">我的电子书</p>
                </div>
                <div className="coupon-list-right">
                  <i className="iconfont icon-you"></i>
                </div>
              </div>

              <div className="coupon-list-item">
                <div className="coupon-list-left">
                  <img src={Product} alt="" />
                  <p className="list-title">我的礼品卡</p>
                </div>
                <div className="coupon-list-right">
                  <i className="iconfont icon-you"></i>
                </div>
              </div>

              <div className="coupon-list-item">
                <div className="coupon-list-left">
                  <img src={address} alt="" />
                  <p className="list-title">收获地址</p>
                </div>
                <div className="coupon-list-right">
                  <i className="iconfont icon-you"></i>
                </div>
              </div>
            </div>
          </div>
          {/* 礼券结束 */}

          {/*service开始*/}
          <div className="dang-my-service">
            <div className="service-list">
              <div className="service-list-left">
                <img src={service} alt="" />
                <p className="list-title">联系客服</p>
              </div>
              <div className="service-list-right">
                <i className="iconfont icon-you"></i>
              </div>
            </div>
          </div>
          {/* service结束 */}

          {/* products开始 */}
          <div className="dang-my-product">
            <div className="products-title">
              <i className="iconfont icon-xianshi_xuanzetianchong"></i>
              <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
            </div>
            <div className="dang-my-line"></div>
          </div>
          {/* products结束 */}

          {/* recommend开始 */}
          <div className="product-list">
            <div className="liststyle">
              {this.state.recommend.map((val) => {
                return (
                  <div
                    className="liststyle-item"
                    key={val.product_id}
                    onClick={this.handleItemClick.bind(this, val)}
                  >
                    <img src={val.image_url} alt=""></img>
                    <p className="list-title">{val.name}</p>
                    <div className="solider">
                      {val.product_tags.map((v) => {
                        return <span key={v.name}>{v.name}</span>;
                      })}
                    </div>
                    <p className="price">￥{val.price}</p>
                  </div>
                );
              })}
            </div>
          </div>
          {/* recommend结束 */}

          {/* 推出登录 */}
          <div className="loginOut" onClick={this.handleClickOut}>
              <div className="goout">
                退出
              </div>
          </div>
          <div className={this.state.backTop === false ? "cart-fixed-box-none" : "cart-fixed-box-block"} onClick={this.backToTop} ref={this.contentRef}>
            <i className="iconfont icon-dingbu"></i>
          </div>
        </div>
      </div>
    );
  }
}
